<template>
	<view>
		<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
			<view class="item" v-for="(item, index) in radiolist1" :key="index">
				<view class="top">
					<u-radio activeColor="rgb(39,209,213)" :label="item.name" :name="item.name"></u-radio>
					<text style="color: rgb(144,144,144); font-size: 26upx;" @click="putContent(item, index)"
						ref="text">修改</text>
				</view>
				<view class="content">
					<text v-if="contentId !== item.id">{{item.content}}</text>
					<el-input v-else v-model="item.content" placeholder="请输入内容" ref="input"></el-input>
				</view>
			</view>

		</u-radio-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiolist1: [],
				radiovalue1: '',
				contentId: 0,
			}
		},
		methods: {
			// 单选自带事件
			groupChange(name) {},
			// 获取数据
			getReplyData() {
				this.$api.getReply().then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.radiolist1 = res.data
						let checked = res.data.filter(item => item.state == 1)
						this.radiovalue1 = checked[0].name
					}
				})
			},
			// 修改内容
			putContent(item, index) {
				if (this.contentId == 0) {
					this.contentId = item.id
					this.$refs.text[index].$el.innerText = "完成"
					this.$nextTick(() => {
						this.$refs.input[0].focus()
					})
				} else {
					this.contentId = 0
					this.$refs.text[index].$el.innerText = "修改"
					this.$api.gutReplyContent(item)
				}
			}
		},
		created() {
			this.getReplyData()
		},
		watch: {
			radiovalue1: {
				handler(newValue, oldValue) {
					this.radiolist1.map(item => {
						if (item.name == oldValue) {
							item.state = "2"
							this.$api.gutReplyState(item)
						}
						if (item.name == newValue) {
							item.state = "1"
							this.$api.gutReplyState(item)
						}
					})
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	.item {
		width: 100%;
		display: flex;
		flex-direction: column;

		.top {
			width: 90%;
			margin: 20upx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.content {
			width: 75%;
			font-size: 26upx;
			margin: 0 auto;
			padding: 20upx 0;
			color: rgb(144, 144, 144);
			border-bottom: 2upx solid rgba(144, 144, 144, .3);
		}
	}
</style>
